<template>
  <div class="ManageServer-page">
    <div class="header">
      <div>
        <p class="title">
          任务|文件列表
          <span class="currentTime">当前查询时间:{{ currentTime }}</span>
        </p>
      </div>

      <div>
        <div class="form">
          <el-form
            :inline="true"
            :model="queryData"
            ref="searchForm"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="自动刷新:">
              <el-switch v-model="value1"> </el-switch>
            </el-form-item>
            <div style="display: inline-block; width: 20%">
              <el-form-item label="">
                <el-select v-model="queryData.state" placeholder="">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="排队中" value="排队中"></el-option>
                  <el-option label="执行中" value="执行中"></el-option>
                  <el-option label="任务完成" value="任务完成"></el-option>
                  <el-option label="任务失败" value="任务失败"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="">
              <el-input
                v-model="queryData.email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
            <el-form-item label="">
              <el-input required v-model.trim="searchForm.Spec" placeholder="">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchSpec"
                ></el-button>
              </el-input>
            </el-form-item>
            <!-- <el-button size="small" @click="onAdd">新增</el-button> -->
          </el-form>
        </div>
      </div>
    </div>

    <div class="body">
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <el-table :data="taskList" border style="width: 100%">
            <!-- <el-table-column type="index" width="30" align="center"> -->
            <!-- </el-table-column> -->
            <el-table-column
              prop="CreateTime"
              label="创建时间"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="ServerName" label="执行端" align="center">
            </el-table-column>
            <el-table-column prop="UserTrueName" label="发起人" align="center">
            </el-table-column>
            <el-table-column
              prop="ConversionTypeStr"
              label="转图类别"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="State" label="任务状态" align="center">
            </el-table-column>
            <el-table-column prop="" label="操作" align="center" width="150">
              <template v-slot="{ row }">
                <el-button size="mini" @click="rowClick(row)">查看</el-button>

                <el-button
                  v-if="row.State === '排队中' || row.State === '执行中'"
                  type="primary"
                  size="mini"
                  @click="onStop(row)"
                >
                  停止
                </el-button>
                <el-button
                  v-else
                  type="primary"
                  size="mini"
                  @click="restart(row)"
                >
                  重启
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="12">
          <el-table :data="detailList" border style="width: 100%">
            <el-table-column type="index" width="30" align="center">
            </el-table-column>
            <el-table-column prop="FileName" label="文件名称" align="center">
            </el-table-column>
            <el-table-column
              prop="State"
              label="状态"
              align="center"
              width="100"
            >
              <template v-slot="{ row }">
                <el-tag v-if="row.State === '转换成功'" type="success"
                  >转换成功</el-tag
                >
                <el-tag v-else type="danger">转换失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="UpdateTime"
              label="更新时间"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="" label="操作" align="center" width="100">
              <template v-slot="{ row }">
                <el-link :border="false" type="primary" @click="getDetail(row)"
                  >转换详情</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

    <div class="dialog">
      <el-dialog
        title="转换详情"
        :visible.sync="showDialog"
        width="40%"
        :before-close="handleClose"
      >
        <!-- <div class="dialog-header"> -->
        <!-- <p class="state">当前状态：</p> -->
        <!-- <el-form :inline="true" :model="detailForm" class="form">
            <el-form-item label="">
              <el-select v-model="detailForm.isRexecute" placeholder="请选择">
                <el-option label="一" value="1"></el-option>
                <el-option label="二" value="2"></el-option>
              </el-select>
            </el-form-item>
            <div style="display: inline-block; width: 30%">
              <el-form-item label="">
                <el-select v-model="detailForm.EventType" placeholder="请选择">
                  <el-option label="一" value="1"></el-option>
                  <el-option label="二" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form> -->
        <!-- </div> -->
        <div class="table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="FileName" label="文件名称">
            </el-table-column>
            <el-table-column prop="EventTime" label="日志时间">
            </el-table-column>
            <el-table-column prop="EventType" label="日志类型">
            </el-table-column>
            <el-table-column prop="Remark" label="备注"> </el-table-column>
            <el-table-column prop="isRexecute" label="重启次数">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <el-dialog
        title=""
        :visible.sync="restartDialog"
        width="40%"
        :before-close="dialogBeforeClose"
      >
        <div style="margin-bottom: 10px">
          <el-button size="mini" type="primary" @click="onRestart"
            >重启</el-button
          >
        </div>
        <div>
          <el-table
            :data="restartData"
            style="width: 100%"
            @selection-change="chooseList"
          >
            <el-table-column type="selection" width="35"> </el-table-column>
            <el-table-column prop="FileName" label="文件名称">
            </el-table-column>
            <el-table-column prop="Version" label="版本"> </el-table-column>
            <el-table-column prop="State" label="状态"> </el-table-column>
            <el-table-column prop="FileState" label="文件状态">
            </el-table-column>
            <el-table-column prop="isRexecute" label="重启次数">
            </el-table-column>
            <el-table-column prop="RelativePath" label="相对路径">
            </el-table-column>
            <el-table-column prop="ConvertType" label="转换格式">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  DirectoryApi,
  getTaskListApi,
  getTFileListApi,
  SearchFileApi,
  restartApi,
  getTaskDListApi,
  getTIRexecuteListApi,
} from "@/api/TaskMonitor";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        Spec: "",
        Username: "admin",
      },
      detailForm: {
        isRexecute: "",
        EventType: "",
      },
      taskList: [],
      detailList: [],
      title: "",
      showDialog: false,

      currentTime: "",
      value1: "",
      queryData: {
        number: 10,
        intPage: 1,
        state: "",
        email: "",
        username: "",
        SPEC: "",
      },
      queryFileData: {
        number: 10,
        intPage: 1,
        TaskID: "",
      },
      querytTaskDList: {
        number: 10,
        intPage: 1,
        CIID: "",
        isRexecute: 1,
        EventType: -1,
      },
      restartDialog: false,
      restartData: [],
      restartList: [],
    };
  },

  created() {
    this.updateTime();
    // this.Directory();
    this.getTaskList();
  },
  methods: {
    async getTaskList() {
      const res = await getTaskListApi(this.queryData);
      console.log(res);
      this.taskList = res.data.rows;
    },
    async Directory() {
      const res = await DirectoryApi({
        postpara: {
          posttype: "GetallDirectory",
        },
        Path: "",
      });
      console.log(res);
    },
    async rowClick(row) {
      console.log(row);
      this.queryFileData.TaskID = row.ID;
      const res = await getTFileListApi(this.queryFileData);
      console.log(res);
      this.detailList = res.data.rows;
    },
    onSearch() {
      this.getTaskList();
    },
    //! 重启
    async restart(row) {
      console.log(row);
      this.restartDialog = true;
      const res = await getTIRexecuteListApi(row.ID);
      // console.log(res);
      this.restartData = res.data;
      this.RexecuteTaskID = row.ID;
      this.RexecuteUserName = row.RexecuteUserName;
    },
    async onStop(row) {
      const res = await restartApi({
        postpara: {
          posttype: "StopTask",
        },
        StopTaskID: row.ID,
        StopUsername: row.UserTrueName,
      });
      console.log(res);
      if (res.data === "E0001") {
        this.$message.success("任务已完成");
      } else if (res.data === "S0001") {
        this.$message.success("停止成功");
      } else if (res.data === "E0002") {
        this.$message.success("任务已停止");
      } else {
        this.$message.error("失败");
      }
      this.getTaskList();
    },
    chooseList(selection, row) {
      // console.log(selection, row);
      this.restartList = selection;
    },
    async onRestart() {
      const res = await restartApi({
        postpara: {
          posttype: "saveRexecute",
        },
        RexecuteTaskID: this.RexecuteTaskID,
        RexecuteUserName: this.RexecuteUserName,
        ureentity: this.restartList,
      });
      console.log(res);
      if (res.data === "E0001") {
        this.$message.warning("无可重启的文件");
      } else if (res.data === "S0001") {
        this.$message.success("重启成功");
      } else {
        this.$message.error("重启失败");
      }
    },
    confirmDel() {},
    onAdd() {
      this.title = "新增执行端";
      this.showDialog = true;
    },
    edit(row) {
      this.title = "编辑执行端";
      this.showDialog = true;
    },
    handleClose() {
      this.showDialog = false;
    },
    dialogBeforeClose() {
      this.restartDialog = false;
    },
    //! 转换详情
    async getDetail(row) {
      this.showDialog = true;
      console.log(row);
      this.querytTaskDList.CIID = row.ID;
      const res = await getTaskDListApi(this.querytTaskDList);
      console.log(res);
      this.tableData = res.data.rows;
    },
    async searchSpec() {
      const res = await SearchFileApi({
        postpara: {
          posttype: "SearchFile",
        },
        ...this.searchForm,
      });
      console.log(res);
      if (res.data.ReturnState === "E0010") {
        this.$confirm(res.data.Message, " 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res1 = await SearchFileApi({
              postpara: {
                posttype: "SendTask",
              },
              ...this.searchForm,
            });
            console.log(res1);
            this.$message({
              message: res1.data.Message,
            });
          })
          .catch(() => {});
      } else {
        this.$message(res.data.Message);
        this.queryData.SPEC = this.searchForm.Spec;
        this.getTaskList();
      }
    },
    updateTime() {
      const date = new Date();
      const hours = this.padZero(date.getHours());
      const minutes = this.padZero(date.getMinutes());
      const seconds = this.padZero(date.getSeconds());
      // 更新currentTime数据
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    padZero(value) {
      // 在个位数前补零
      return value < 10 ? "0" + value : value;
    },
  },
};
</script>

<style lang="scss" scoped>
.ManageServer-page {
  background-color: #fff;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #ccc;
    .title {
      font-size: 20px;
      .currentTime {
        font-size: 13px;
        color: #ccc;
      }
    }

    .form {
      // padding-top: 20px;
      // padding-right: 20px;
    }
  }

  .body {
    padding: 50px 10px;
  }

  .dialog {
    .dialog-header {
      position: relative;

      .state {
        position: absolute;
        left: 0px;
      }
      .form {
        position: absolute;
        right: -100px;
      }
    }

    .table {
      // margin-top: 90px;
    }
  }
}
</style>
